<template>
  <information>
    <template v-slot="{topic}">
      <el-main class="ctxt" v-for="(item, index) in topic" :key="index">
        <el-container>
          <el-header height="30px" class="cl-top">
            <i v-if="item.good">
              <img
                class="typeImg"
                draggable="false"
                src="https://cdn.hterobot.com/vue/public/forum/jian.png"
              />
            </i>
            <i v-if="item.lock">
              <img
                class="typeImg"
                draggable="false"
                src="https://cdn.hterobot.com/vue/public/forum/jian.png"
              />
            </i>
            <i v-if="item.top">
              <img
                class="typeImg"
                draggable="false"
                src="https://cdn.hterobot.com/vue/public/forum/re.png"
              />
            </i>
            <h4>
              <router-link class="route" :to="{name: 'detail', params:{id: item.ID}}">{{item.title}}</router-link>
            </h4>
          </el-header>
          <el-main class="text">{{item.txt}}</el-main>
          <el-footer class="footer row">
            <li class style="display:centents">
              <img
                class="authorImg"
                draggable="false"
                :src="item.headimg?item.headimg:'/public/static/imgs/forum/touxiang.png'"
              />
              {{item.username}}
            </li>
            <li class style="display:centents">
              <span v-text="times(item.createtime)"></span> 天前
            </li>
            <li class>
              <i class="icon-xinxi icon iconfont"></i>
              {{ item.reply_count }}
            </li>
            <li class style="display:centents">
              <i class="icon-xinaixin- icon iconfont text-success"></i>
              {{ item.click_count }}
            </li>
            <li class style="display:centents">
              <i class="el-icon-view"></i>
              {{ item.collect_count }}
            </li>
            <li class="data-bian" style="display:centents">
              <router-link
                class="data-span"
                :to="{name: 'editor', params:{id: item.ID}}"
                v-if="getuser && item.uid==getuser.userid"
              >编辑</router-link>
            </li>
            <li class="data-shan" style="display:centents">
              <span
                class="data-span"
                @click="backspace(item.ID)"
                v-if="getuser && item.uid==getuser.userid"
              >删除</span>
            </li>
          </el-footer>
        </el-container>
      </el-main>
    </template>
  </information>
</template>

<script>
import { mapGetters } from "vuex";
import { asyncdelecttopicbyid } from "../../../plugins/api.js";
import information from "./information.vue";
export default {
  components: {
    information
  },
  props: ["topic"],
  computed: {
    ...mapGetters(["getuser"])
  },
  methods: {
    async backspace(ID) {
      try {
        await asyncdelecttopicbyid({ ID: ID });
        this.$message("删除成功");
        this.$router.push("/");
      } catch (err) {
        this.$message("发布失败");
      }
    },
    times(time) {
      return Math.ceil(
        (Date.parse(new Date()) - Date.parse(new Date(time))) /
          1000 /
          60 /
          60 /
          24
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  padding: 0;
}
.footer li {
  padding-right: 2rem;
}
.text-success {
  color: red !important;
}
.data-shan :hover {
  color: #2f81f1;
}
.data-bian :hover {
  color: #2f81f1;
}
.data-right {
  float: right;
}
.data-div {
  z-index: 99;
  position: absolute;
  padding: 30px;
  width: 987px;
  height: 669px;
  background: #ffffff;
  border-radius: 10px;
  margin-left: 296px;
  margin-top: 50px;
  border: 1px solid #eeeeee;
}
.data-span {
  cursor: pointer;
  color: #333333;
}

.ctxt {
  background-color: #ffffff;
  border-bottom: 1px solid #dfdfdf;
}
.authorImg {
  margin-right: 8px;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
</style>
